<!-- 工单分析 -->
<template>
	<div class="OrderAnalyse" id="mainId">
		<!-- 弹框 -->
		<div v-show="showtk" class="eject" ref="eject1" id="eject1" style="" :style="{ backgroundImage: bodyBgImage }">
			<div class="close" @click="infoClose">
				×
			</div>
			<p v-if="infoMsg.status == 0" style="color:#13FF04 !important;">{{ infoMsg.link }}</p>
			<p v-if="infoMsg.status == 3" style="color:#21D3FF !important;">{{ infoMsg.link }}</p>
			<p v-if="infoMsg.status == 2" style="color:#FFF904 !important;">{{ infoMsg.link }}</p>
			<p v-if="infoMsg.status == 11" style="color:#F33635 !important;">{{ infoMsg.link }}</p>
			<p>案件号：<span>{{ infoMsg.orderNum }}</span></p>
			<p>采集来源：<span>{{ infoMsg.staFrom }}</span></p>
			<p>一二级分类：<span>{{ infoMsg.aType || '无' }}-{{ infoMsg.bType || '无' }}</span></p>
			<p>当前所在部门：<span>{{ infoMsg.orgName }}</span></p>
			<p>案件截止时间：<span>{{ infoMsg.cutTime }}</span></p>
		</div>
		<!-- 图表内容 -->
		<div class="home_content flex align-items-end">
			<div class="left absolute">
				<!-- 工单走势 -->
				<div class="left_item">
					<checked-title :title="titleTop"></checked-title>
					<div class="echarts" id="echarts1" ref="echarts1"></div>
				</div>
				<!-- 全区各类渠道受理案件数量、比例 -->
				<div class="left_item">
					<checked-title :title="titleTop1"></checked-title>
					<div class="echarts" id="echarts2" ref="echarts2"></div>
				</div>
				<!-- 各街办、乡(镇)受理各类渠道案件数量 -->
				<div class="left_item">
					<checked-title :title="titleTop2">
						<template #right v-if="title1Top1">
							<p class="title2">{{ title1Top1 }}</p>
						</template>
					</checked-title>
					<div class="echarts" id="echarts3" ref="echarts3"></div>
				</div>
			</div>
			<div class="right absolute">
				<!-- 受理案件区域（街乡）分布情况 -->
				<div class="right_item">
					<checked-title :title="titleTop3"></checked-title>
					<div class="echarts" id="echarts4" ref="echarts4"></div>
				</div>
				<!-- 案件性质类型(大类)占比情况 -->
				<div class="right_item">
					<checked-title :title="titleTop4"></checked-title>
					<div class="echarts" id="echarts5" ref="echarts5"></div>
				</div>
				<!-- 各部门受理各类渠道案件数量情况 -->
				<div class="right_item">
					<checked-title :title="titleTop5">
						<template #right v-if="title1Top6">
							<p class="title2">{{ title1Top6 }}</p>
						</template>
					</checked-title>
					<div class="echarts" id="echarts6" ref="echarts6"></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
const baseUrl = process.env.VUE_APP_BASE_URL;
import AMap from "AMap";
import echarts from "echarts";

import highcharts from "highcharts";
import highcharts3d from "highcharts/highcharts-3d";
import https from '@request/https'
import axios from "axios";
// 绘制左侧面
const InclinedRoofBar = echarts.graphic.extendShape({
	shape: {
		x: 0,
		y: 0,
		width: 10, //间距
	},
	buildPath: function (ctx, shape) {
		// canvas，shape是从custom传入的
		const xAxisPoint = shape.xAxisPoint;
		const c0 = [shape.x, shape.y];
		const c1 = [shape.x - 17, shape.y - 10];
		const c2 = [xAxisPoint[0] - 17, xAxisPoint[1]];
		const c3 = [xAxisPoint[0], xAxisPoint[1]];
		ctx
			.moveTo(c0[0], c0[1])
			.lineTo(c1[0], c1[1])
			.lineTo(c2[0], c2[1])
			.lineTo(c3[0], c3[1])
			.closePath();
	},
});
echarts.graphic.registerShape("InclinedRoofBar", InclinedRoofBar);
//测试提交
export default {
	data() {
		return {
			map: null,
			mapcenter: [112.579364, 37.736195], //地图中心
			titleTop: '工单走势',
			byAreaList: {
				list1: [],
				list2: []
			},
			TypeProList: {
				list1: [],
				list2: []
			},
			staFromNumList: {
				list: [],
				data: []
			},
			titleTop1: '全区各类渠道受理案件数量、比例',
			titleTop2: '各街办、乡(镇)受理各类渠道案件数量',
			titleTop3: '受理案件区域（街乡）分布情况',
			titleTop4: '案件性质类型(大类)占比情况',
			titleTop5: '各部门受理各类渠道案件数量情况',
			title1Top1: '',
			title1Top6: '',
			trendData: {
				xData: [],
				yData: []
			},
			typeList: {
				xData: [],
				yData: []
			},
			baseUrl: "/api111",

			caseNum: 0, //工单总数
			StreeList: [], //街办列表
			indexStreeList: [],
			DepartmentsList: [],
			indexDepartmentsList: [],
			// 各街办乡镇受理案件数量
			maxnum: 0, //各街办最大值
			bottomarr: [], //底部背景数组
			allarr: [], //整个背景数组

			index: 0,
			echShow: true, //除地图外的内容
			markers: [],
			showtk: false,
			infoMsg: {},
			timer: null,
			bodyBgImage: 'url(' + require('@assets/images/home/clzback.png') + ')',
			temporaryList1: [],
			temporaryList2: [],
			showText: '全屏',

		};
	},

	created() {

	},
	mounted() {

		this.getByArea()
		this.getTypePro()
		this.getStaFromNum()
		this.getTrend()
		this.getStree()
		this.getDepartments()
		this.timer = setInterval(() => {
			this.index++
			if (this.index == 9) {
				this.index = 0
			} else {
				this.title1Top6 = this.DepartmentsList[this.index].name
				this.indexDepartmentsList = this.DepartmentsList[this.index].list
				this.title1Top1 = this.StreeList[this.index].name
				this.indexStreeList = this.StreeList[this.index].list
				this.$nextTick(() => {
					this.echarts3()
					this.echarts6()
				});
			}
		}, 5000)
	},
	methods: {
		markerClick(e) {
			let infoWindow = new AMap.InfoWindow({
				isCustom: true, //使用自定义窗体
				offset: new AMap.Pixel(0, -20),
				// visible: false//初始是否显示
			});
			infoWindow.setContent(e.target.content);
			infoWindow.open(this.map, e.target.getPosition());
		},
		infoClose() {
			this.showtk = false;
			this.markers.forEach(
				(item) => (item.Ce.contentDom.className = "amap-marker-content")
			);
		},
		// 轮播
		carousel() {
			var athis = this
			this.showtk = false;
			var lengthnum = []
			for (var i = 0; i < this.markers.length; i++) {
				this.markers[i].Ce.contentDom.className = "amap-marker-content";
				if (this.markers[i].Ce.data.xCoordinate != 0 || this.markers[i].Ce.data.xCoordinate != '0.0' || this
					.markers[i].Ce.data.xCoordinate != 0.0) {
					lengthnum.push(this.markers[i])
				}
			}
			var index = Math.floor(Math.random() * lengthnum.length);
			lengthnum[index].Ce.contentDom.className =
				"amap-marker-content abcdef"; //给点加动画
			this.infoMsg = lengthnum[index].Ce.data;
			this.$forceUpdate();
			// var infoWindow = new AMap.InfoWindow({
			//   anchor: "middle-left",
			//   content: this.$refs.eject,
			//   offset: new AMap.Pixel(-18, 30),
			// });
			this.showtk = true;
			var position1 = [Math.floor(this.infoMsg.xCoordinate * 1000000) / 1000000, Math.floor(this.infoMsg
				.yCoordinate * 1000000) / 1000000];
			athis.map.setCenter(position1);
		},
		// -------------------------------图表------------------------------
		//工单走势
		echarts1() {
			var myChart1 = echarts.init(this.$refs.echarts1);
			var option1 = {
				tooltip: {
					trigger: "axis",
					backgroundColor: "rgba(31, 73, 135, 0.5)", //设置背景图片 rgba格式
					borderWidth: "0", //边框宽度设置1
					textStyle: {
						color: "#fff", //设置文字颜色
					},
					axisPointer: {
						type: "line",
						lineStyle: {
							type: "solid", //打开就是实线类型
							color: "rgba(13, 151, 235, 0.7)",
						},
					},
					formatter: '<span style="font-size:12px;color:#fff;" >{c}件</span>',
				},
				grid: {
					top: "10%",
					left: "0%",
					right: "5%",
					bottom: "5%",
					containLabel: true,
				},
				xAxis: {
					type: 'category',
					data: this.trendData.xData,
					boundaryGap: false, //调整数组跟刻度在一
					axisLabel: {
						fontSize: 12,
						color: "#ffffff",
					},
					axisLine: {
						lineStyle: {
							color: "rgba(158, 173, 201, 1)",
						},
					},
					axisTick: {
						show: true,
					},
				},
				yAxis: {
					type: 'value',
					axisLabel: {
						fontSize: 14,
						color: "#ffffff",
					},
					axisTick: {
						show: true,
					},
					axisLine: {
						show: true,
						lineStyle: {
							color: "rgba(165, 176, 200, 1)",
						},
					},
					// 调整每条线
					splitLine: {
						show: true,
						lineStyle: {
							color: "rgba(0, 142, 225, 0.30)",
						},
					},
				},
				series: [{
					data: this.trendData.yData,
					type: "line",
					symbolSize: 8, //设定实⼼点的⼤⼩
					symbol: "circle", // 折线点设置为实心点
					smooth: true, //让折线有弧度
					itemStyle: {
						normal: {
							color: "rgba(243, 192, 43, 1)", //折点颜⾊
							borderColor: "#fff", // 拐点边框颜色
							lineStyle: {
								color: "#19C7F5", //折线颜⾊
								shadowOffsetX: 0, // 折线的X偏移
								shadowOffsetY: 9, // 折线的Y偏移
								shadowBlur: 6, // 折线模糊
								shadowColor: "rgba(0,142,225,0.5)", //折线颜色
							},
						},
					},
				}]
			};
			myChart1.setOption(option1);
		},
		//全区各类渠道受理案件数量、比例
		echarts2() {
			var myChart2 = echarts.init(this.$refs.echarts2);
			var option2 = {
				tooltip: {
					trigger: 'item',
					backgroundColor: "rgba(31, 73, 135, 0.5)", //设置背景图片 rgba格式
					borderWidth: "0", //边框宽度设置1
					textStyle: {
						color: "#fff", //设置文字颜色
					},
					axisPointer: {
						type: "line",
						lineStyle: {
							type: "solid", //打开就是实线类型
							color: "rgba(13, 151, 235, 0.7)",
						},
					},
					formatter: '{b} <br/>受理案件数量：{c} <br/> 受理案件占比：{d}%'
				},
				title: {
					text: this.caseNum,
					textStyle: {
						color: '#FFFFFF'
					},
					subtext: '案件总数',
					subtextStyle: {
						color: '#FFFFFF'
					},
					textAlign: 'center',
					left: '19%',
					top: '40%'
				},
				legend: [{
					top: "10%",
					right: "28%",
					align: "left", //字在图例的左边或右边【left/right】
					orient: "vertical", //图例方向【horizontal/vertical】
					icon: "circle", //图例形状【circle\rect\roundRect\triangle\diamond\pin\arrow\none】
					itemHeight: 10,
					itemWidth: 10,
					textStyle: {
						color: "#9ED5FF",
						fontSize: 12,
					},
					itemGap: 15, //设置图例的间距
					data: this.staFromNumList.list.map((it, index) => {
						if (index < 7) {
							return it;
						}
					}),
				},
				{
					//   y: " center",
					top: "10%",
					right: "0%",
					align: "left", //字在图例的左边或右边【left/right】
					orient: "vertical", //图例方向【horizontal/vertical】
					icon: "circle", //图例形状【circle\rect\roundRect\triangle\diamond\pin\arrow\none】
					itemHeight: 10,
					itemWidth: 10,
					textStyle: {
						color: "#9ED5FF",
						fontSize: 12,
					},
					itemGap: 15, //设置图例的间距
					data: this.staFromNumList.list.map((it, index) => {
						if (index > 7 && index < 14) {
							return it;
						}
					}),
				},
				],
				series: [{
					name: '访问来源',
					type: 'pie',
					radius: ['50%', '70%'],
					center: ["20%", "50%"],
					avoidLabelOverlap: false,
					label: {
						show: false,
						position: 'center'
					},
					color: ['#FF9354', '#6D9FFF', '#FF6D70', '#3CFFFF', '#2CB1FE', '#3D4DFF', '#4BA3FB',
						'#FFDC63', '#8AFB7C', '#E23EE4', '#218CFF', '#FF3D6E', '#80FA50'
					],
					emphasis: {
						label: {
							show: false,
							fontSize: '30',
							fontWeight: 'bold'
						}
					},
					labelLine: {
						show: false
					},
					data: this.staFromNumList.data
				}]
			};

			myChart2.setOption(option2);
		},
		//各街办、乡(镇)受理各类渠道案件数量
		echarts3() {
			var myChart3 = echarts.init(this.$refs.echarts3);
			var option3 = {
				tooltip: {
					trigger: "axis",
					backgroundColor: "rgba(31, 73, 135, 0.5)", //设置背景图片 rgba格式
					borderWidth: "0", //边框宽度设置1
					textStyle: {
						color: "#fff",
					},
					axisPointer: {
						type: "line",
						lineStyle: {
							type: "solid", //打开就是实线类型
							color: "rgba(13, 151, 235, 0.7)",
						},
					},
					formatter: '{b} <br/>案件数量：{c}'
				},
				grid: {
					top: "10%",
					left: "13%",
					right: "0%",
					bottom: "30%",
				},
				xAxis: {
					show: true,
					axisTick: {
						show: false,
					},
					axisLine: {
						show: true,
						lineStyle: {
							type: "dashed",
							color: "#2D4377",
							opacity: 1,
						},
					},
					axisLabel: {
						rotate: 35,
						interval: 0,
						textStyle: {
							color: "rgba(158, 213, 255, 1)",
							fontSize: 12,
						},
						margin: 12, // 刻度标签与轴线之间的距离。
					},
					data: [
						"数字城管",
						"便民热线",
						"人民网",
						"市长信箱",
						"智能抓拍",
						"一路一专班",
						"志愿者随手拍",
						"门前三包",
						"其他",
						"区长信箱",
						"问题上报",
						"智能抓拍(街办)",
						"问题上报(街办)",
					],
					type: "category",
				},
				yAxis: {
					min: 0,
					max: this.maxnum,
					// max: this.echartData.max,
					minInterval: Math.round(this.maxnum / 4),
					nameTextStyle: {
						align: "left",
						color: "rgba(255,255,255,0.8)",
						padding: [0, 0, 0, -20],
						fontSize: 14,
					},
					splitLine: {
						show: true,
						lineStyle: {
							type: "dashed",
							color: "#2D4377",
							opacity: 0.5,
						},
					},
					axisTick: {
						show: false,
					},
					axisLine: {
						show: false,
					},
					axisLabel: {
						textStyle: {
							color: "rgba(255, 255, 255, 1)",
							fontSize: 14,
						},
					},
				},
				series: [{
					//下半截柱子底部圆片
					cursor:"pointer",
					name: "",
					type: "pictorialBar",
					symbolSize: [20, 10],
					symbolOffset: [0, 4],
					z: 12,
					itemStyle: {
						opacity: 1,
						color: function (params) {
							var a = params.name.slice(0, 2);
							return new echarts.graphic.LinearGradient(
								0,
								0,
								0,
								1,
								[{
									offset: 0,
									color: "rgb(23, 97, 222)", // 0% 处的颜色
								},
								{
									offset: 1,
									color: "rgb(23, 97, 222)", // 100% 处的颜色
								},
								],
								false
							);
						},
					},
					data: this.bottomarr,
				},
				{
					type: "bar", // 下半截柱状图背景颜色
					barWidth: 20,
					barGap: "-100%",
					itemStyle: {
						// lenged文本
						opacity: 1,
						color: function (params) {
							var a = params.name.slice(0, 2);
							return new echarts.graphic.LinearGradient(
								0,
								0,
								0,
								1,
								[{
									offset: 0,
									color: "rgb(25, 106, 221)", // 0% 处的颜色
								},
								{
									offset: 1,
									color: "rgb(32, 189, 244)", // 100% 处的颜色
								},
								],
								false
							);
						},
					},
					data: this.indexStreeList,
				},
				{
					name: "", //下半截柱子顶部图片
					type: "pictorialBar",
					symbolSize: [20, 12],
					symbolOffset: [0, -4],
					z: 5,
					itemStyle: {
						opacity: 1,
						color: function (params) {
							var a = params.name.slice(0, 2);
							return new echarts.graphic.LinearGradient(
								0,
								0,
								0,
								1,
								[{
									offset: 0,
									color: "rgb(26, 158, 230)", // 0% 处的颜色
								},
								{
									offset: 1,
									color: "rgb(26, 158, 230)", // 100% 处的颜色
								},
								],
								false
							);
						},
					},
					symbolPosition: "end",
					data: this.indexStreeList,
				},
				{
					name: "", //上半截柱子顶部图片
					type: "pictorialBar",
					symbolSize: [20, 10],
					symbolOffset: [0, -5],
					z: 12,
					symbolPosition: "end",
					itemStyle: {
						color: "#163F7A",
						opacity: 1,
					},
					data: this.allarr,
				},
				{
					name: "", //上半截柱子背景颜色
					type: "bar",
					barWidth: 20,
					barGap: "-100%",
					z: 0,
					itemStyle: {
						color: "#163F7A",
						opacity: 0.3,
					},
					data: this.allarr,
				},
				],
			};
			myChart3.setOption(option3);
		},
		//受理案件区域（街乡）分布情况
		echarts4() {
			var myChart4 = echarts.init(this.$refs.echarts4);
			var option4 = {
				tooltip: {
					trigger: "item",
					backgroundColor: "rgba(31, 73, 135, 0.5)", //设置背景图片 rgba格式
					borderWidth: "0", //边框宽度设置1
					textStyle: {
						color: "#fff", //设置文字颜色
					},
					axisPointer: {
						type: "line", //line,shadow
						lineStyle: {
							type: "solid", //打开就是实线类型
							color: "rgba(13, 151, 235, 0.7)",
						},
					},
					formatter: '{c}个'
				},
				grid: {
					top: "10%",
					left: "0%",
					right: "0%",
					bottom: "5%",
					containLabel: true,
				},
				xAxis: {
					type: 'category',
					data: this.byAreaList.list1,
					axisTick: {
						show: false,
					},
					axisLabel: {
						show: true,
						textStyle: {
							color: "#C9DFFF", //更改坐标轴文字颜色
							fontSize: 14, //更改坐标轴文字大小
						},
						formatter: function (value) {
							return value.split("").join("\n");
						},
					},
					axisLine: {
						show: false,
					},
				},
				yAxis: {
					type: 'value',
					axisTick: {
						show: false,
					},
					axisLabel: {
						show: false,
					},
					axisLine: {
						show: false,
					},
					splitLine: {
						show: false,
					},
				},
				series: [{
					data: this.byAreaList.list2,
					type: "custom",
					renderItem: (params, api) => {
						const location = api.coord([api.value(0), api.value(1)]);
						const xlocation = api.coord([api.value(0), 0]);
						const colors = [
							['rgba(66, 151, 255, 1)', 'rgba(61, 36, 243, 0)'],
							['rgba(255, 101, 148, 1)', 'rgba(255, 17, 79, 0)'],
							['rgba(78, 166, 255, 1)', 'rgba(35, 71, 255, 0)'],
							['rgba(124, 255, 149, 0.92)', 'rgba(17, 155, 238, 0)'],
							['rgba(66, 217, 255, 1)', 'rgba(18, 81, 210, 0)'],
							['rgba(66, 151, 255, 1)', 'rgba(61, 36, 243, 0)'],
							['rgba(255, 101, 148, 1)', 'rgba(255, 17, 79, 0)'],
							['rgba(66, 151, 255, 1)', 'rgba(61, 36, 243, 0)'],
							['rgba(255, 101, 148, 1)', 'rgba(255, 17, 79, 0)'],
							['rgba(78, 166, 255, 1)', 'rgba(35, 71, 255, 0)'],
							['rgba(124, 255, 149, 0.92)', 'rgba(17, 155, 238, 0)'],
							['rgba(66, 217, 255, 1)', 'rgba(18, 81, 210, 0)'],
							['rgba(66, 151, 255, 1)', 'rgba(61, 36, 243, 0)'],
							['rgba(255, 101, 148, 1)', 'rgba(255, 17, 79, 0)']
						];
						return {
							type: "InclinedRoofBar",
							shape: {
								api,
								xValue: api.value(0),
								yValue: api.value(1),
								x: location[0] + 10,
								y: location[1],
								xAxisPoint: [xlocation[0] + 10, xlocation[1]],
							},
							style: {
								fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: colors[params.dataIndex][0],
								},
								{
									offset: 1,
									color: colors[params.dataIndex][1],
								},
								]),
							},
						};
					},
					showBackground: true,
					backgroundStyle: {
						color: 'rgba(43, 136, 250, 0.1)'
					},
					barWidth: '17',
				}, {
					type: "bar",
					showBackground: true,
					barWidth: "17",
					backgroundStyle: {
						color: "rgba(43, 136, 250, 0.1)",
					},
					itemStyle: {
						color: "transparent",
					},
					data: this.byAreaList.list2.map((item, index) =>
						Object.assign(item, {
							label: {
								color: '#000'
							}
						})
					),
				}]
			};
			myChart4.setOption(option4);

		},
		//案件性质类型(大类)占比情况
		echarts5() {
			var myChart5 = echarts.init(this.$refs.echarts5);
			var option5 = {
				tooltip: {
					trigger: "axis",
					backgroundColor: "rgba(31, 73, 135, 0.5)", //设置背景图片 rgba格式
					borderWidth: "0", //边框宽度设置1
					textStyle: {
						color: "#fff", //设置文字颜色
					},
					axisPointer: {
						type: "line", //line,shadow
						lineStyle: {
							type: "solid", //打开就是实线类型
							color: "rgba(13, 151, 235, 0.7)",
						},
					},
					formatter: '{b} <br/>案件数量：{c}'
				},
				grid: {
					top: "10%",
					left: "-10%",
					right: "0%",
					bottom: "-15%",
					containLabel: true,
				},
				xAxis: {
					type: "category",
					axisLabel: {
						rotate: 50,
						margin: 15,
						textStyle: {
							color: "#C9DFFF", //更改坐标轴文字颜色
							fontSize: 12, //更改坐标轴文字大小
						},
						formatter: function (name, index) {
							switch (index) {
								case 5:
									return name.substring(0, 9) + "\n" + "\n" + name.substring(9);
								default:
									return name;
							}
						},
					},
					splitLine: {
						show: false,
					},
					axisLine: {
						show: false,
					},
					axisTick: {
						show: false,
					},
					data: this.TypeProList.list1,
				},
				yAxis: {
					show: false,
				},
				series: [{
					//内
					type: "bar",
					barWidth: 10,
					itemStyle: {
						normal: {
							color: function (params) {
								// 定义换色数组
								let colorList = [
									["rgba(243, 192, 43, 0.92)", "rgba(117, 98, 42, 0.92)"],
									["rgba(27, 223, 252, 1)", "rgba(18, 81, 210, 1)"],
								];
								if (params.dataIndex % 2 == 0) {
									return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: colorList[0][0],
									},
									{
										offset: 1,
										color: colorList[0][1],
									},
									]);
								} else {
									return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: colorList[1][0],
									},
									{
										offset: 1,
										color: colorList[1][1],
									},
									]);
								}
							},
						},
					},
					data: this.TypeProList.list2,
					z: 10,
					zlevel: 0,
				},
				{
					//分隔
					type: "pictorialBar",
					itemStyle: {
						normal: {
							color: "#0F375F",
						},
					},
					symbolRepeat: "fixed",
					symbolMargin: 3,
					symbol: "rect",
					symbolClip: true,
					symbolSize: [10, 2],
					symbolPosition: "start",
					symbolOffset: [0, 0],
					data: this.TypeProList.list2,
					width: 25,
					z: 2,
					zlevel: 1,
				},
				],
			}
			myChart5.setOption(option5);

		},
		//各部门受理各类渠道案件数量情况
		echarts6() {
			var myChart6 = echarts.init(this.$refs.echarts6);
			var option6 = {
				tooltip: {
					trigger: "axis",
					backgroundColor: "rgba(31, 73, 135, 0.5)", //设置背景图片 rgba格式
					borderWidth: "0", //边框宽度设置1
					textStyle: {
						color: "#fff", //设置文字颜色
					},
					axisPointer: {
						type: "line", //line,shadow
						lineStyle: {
							type: "solid", //打开就是实线类型
							color: "rgba(13, 151, 235, 0.7)",
						},
					},
					formatter: '{b} <br/>案件数量：{c}',
				},
				grid: {
					top: "10%",
					left: "0%",
					right: "0%",
					bottom: "0%",
					containLabel: true,
				},
				xAxis: {
					type: 'category',
					data: [
						"数字城管",
						"便民热线",
						"人民网",
						"市长信箱",
						"智能抓拍",
						"一路一专班",
						"志愿者随手拍",
						"门前三包",
						"其他",
						"区长信箱",
						"问题上报",
						"智能抓拍(街办)",
						"问题上报(街办)",
					],
					axisLine: {
						show: false,
					},
					axisTick: {
						show: false,
					},
					axisLabel: {
						rotate: 50,
						interval: 0,
						textStyle: {
							color: "#9ED5FF",
							fontSize: 12,
						},
					},
					splitLine: {
						show: false,
					},
					splitArea: {
						show: false,
					},
				},
				yAxis: {
					type: 'value',
					axisTick: {
						show: false,
					},
					axisLine: {
						show: false,
					},
					axisLabel: {
						textStyle: {
							color: "#fff",
							fontSize: 14,
						},
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: "rgba(13, 151, 235, 0.1)",
							type: "dashed",
						},
					},
				},
				series: [{
					data: this.indexDepartmentsList,
					type: "bar",
					barMaxWidth: 15,
					barGap: "10%",
					itemStyle: {
						normal: {
							color: function (params) {
								// 定义换色数组
								let colorList = [
									["rgba(18, 81, 210, 1)", "rgba(27, 223, 252, 1)"],
									["rgba(124, 255, 149, 0.92)", "rgba(17, 155, 238, 0)"],
								];
								if (params.dataIndex % 2 == 0) {
									return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: colorList[0][0],
									},
									{
										offset: 1,
										color: colorList[0][1],
									},
									]);
								} else {
									return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: colorList[1][0],
									},
									{
										offset: 1,
										color: colorList[1][1],
									},
									]);
								}
							},
							label: {
								show: false,
							},
							barBorderRadius: [30, 30, 0, 0], //圆角大小
						},
					},
				}]
			};
			myChart6.setOption(option6);

		},
		// ----------------------------接口----------------------------------
		// 工单走势
		getTrend() {
			var api = `${baseUrl}/home/dataTrend`
			var params = {
				type: 2,
				num: 7
			}
			https.GetRequest(api, params).then(res => {
				if (res.data.code == 200) {
					var datas = res.data.data
					for (var i = 0; i < datas.length; i++) {
						this.trendData.yData.push(datas[i].countNum)
						let time = datas[i].time.split('-')
						let time1 = time[1] + '/' + time[2]
						this.trendData.xData.push(time1)
					}
					this.echarts1()
				}
			})
		},
		//全区各类渠道受理案件数量
		getStaFromNum() {
			var api = `${baseUrl}/bigData/staFromNum`
			https.GetRequest(api).then(res => {
				if (res.data.code == 200) {
					var data = res.data.data
					for (let index = 0; index < data.length; index++) {
						this.staFromNumList.list.push(data[index].name)
						this.staFromNumList.data.push({
							value: data[index].num,
							name: data[index].name
						})
						this.caseNum += Number(data[index].num)
					}
					this.echarts2()
				}
			})
		},
		// 各街办乡镇受理各类渠道案件数量
		getStree() {
			var api = `${baseUrl}/bigData/orderNumByStaFrom`
			var params = {
				type: 1
			}
			https.GetRequest(api, params).then(res => {
				if (res.data.code == 200) {
					var data = res.data.data
					for (let index = 0; index < data.length; index++) {
						var arr = []
						arr.push(data[index].from1)
						arr.push(data[index].from2)
						arr.push(data[index].from3)
						arr.push(data[index].from4)
						arr.push(data[index].from5)
						arr.push(data[index].from6)
						arr.push(data[index].from7)
						arr.push(data[index].from8)
						arr.push(data[index].from9)
						arr.push(data[index].from10)
						arr.push(data[index].from11)
						arr.push(data[index].from12)
						arr.push(data[index].from13)
						var json = {}
						json.name = data[index].name
						json.num = data[index].num
						json.list = arr
						this.StreeList.push(json)
					}
					this.title1Top1 = this.StreeList[0].name
					this.indexStreeList = this.StreeList[0].list
					this.maxnum = Math.max.apply(null, this.indexStreeList)
					this.indexStreeList.forEach((item) => {
						this.bottomarr.push(0.5)
						this.allarr.push(this.maxnum)
					})
					this.echarts3()
				}
			})
		},
		//受理案件区域分布
		getByArea() {
			var api = `${baseUrl}/bigData/orderNumByArea`
			https.GetRequest(api).then(res => {
				if (res.data.code == 200) {
					var data = res.data.data
					for (let index = 0; index < data.length; index++) {
						this.byAreaList.list1.push(data[index].name)
						this.byAreaList.list2.push(data[index].num)
					}
					this.echarts4()
				}
			})
		},
		//工单类型占比
		getTypePro() {
			var api = `${baseUrl}/bigData/orderTypePro`
			https.GetRequest(api).then(res => {
				if (res.data.code == 200) {
					var data = res.data.data
					for (let index = 0; index < data.length; index++) {
						this.TypeProList.list1.push(data[index].name)
						this.TypeProList.list2.push(data[index].num)
					}
					this.echarts5()
				}
			})
		},
		// 各街办
		getDepartments() {
			var api = `${baseUrl}/bigData/orderNumByStaFrom`
			var params = {
				type: 2
			}
			https.GetRequest(api, params).then(res => {
				if (res.data.code == 200) {
					var data = res.data.data
					for (let index = 0; index < data.length; index++) {
						var arr = []
						arr.push(data[index].from1)
						arr.push(data[index].from2)
						arr.push(data[index].from3)
						arr.push(data[index].from4)
						arr.push(data[index].from5)
						arr.push(data[index].from6)
						arr.push(data[index].from7)
						arr.push(data[index].from8)
						arr.push(data[index].from9)
						arr.push(data[index].from10)
						arr.push(data[index].from11)
						arr.push(data[index].from12)
						arr.push(data[index].from13)
						var json = {}
						json.name = data[index].name
						json.num = data[index].num
						json.list = arr
						this.DepartmentsList.push(json)
					}
					this.title1Top6 = this.DepartmentsList[0].name
					this.indexDepartmentsList = this.DepartmentsList[0].list
					this.echarts6()
				}
			})
		},

	},
	beforeDestroy() {
		//清除定时器
		clearInterval(this.timer);
	},
};
</script>
<style lang="less">
// 弹窗
.amap-marker-label {
	background: transparent;
	border: none;
}

.input-card {
	// height: 120px;
	position: relative;
	display: flex;
	align-items: flex-start;

	img {
		width: 45px;
		margin-right: 20px;
		// width: 63px;
		// height: 100px;
	}

	.input-card1 {
		position: absolute;
		left: -19px;
		bottom: -22px;
	}

	.window-cont {
		width: 265px;
		min-height: 60px;
		padding: 5px;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		display: flex;
		flex-direction: column;
		justify-content: center;

		p {
			font-size: 14px;
			color: #fff;
			// margin-bottom: 10px;
			white-space: normal;
			word-break: normal;
			line-height: 22px;
		}

		p:last-child {
			margin-bottom: 0;
		}
	}

	.status0 {
		//绿色
		color: #1dfd06;
	}

	.status2 {
		//黄色
		color: #FDEF06;
	}

	.status3 {
		//蓝色
		color: #21D3FF;
	}

	.status11 {
		//红色
		color: #F33635;
	}

	.statusbj0 {
		width: 86px;
		height: 50px;
		background: rgba(33, 61, 96, 0.2);
		opacity: 0.6;
		border-radius: 50%;
		box-shadow: inset 0px 0px 4px 6px rgba(114, 98, 99, 0.1);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.statusbj2 {
		width: 86px;
		height: 50px;
		background: rgba(33, 61, 96, 0.2);
		opacity: 0.6;
		border-radius: 50%;
		box-shadow: inset 0px 0px 4px 6px rgba(253, 239, 6, 0.1);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.statusbj3 {
		width: 86px;
		height: 50px;
		background: rgba(33, 61, 96, 0.2);
		opacity: 0.6;
		border-radius: 50%;
		box-shadow: inset 0px 0px 4px 6px rgba(33, 211, 255, 0.1);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.statusbj11 {
		width: 86px;
		height: 50px;
		background: rgba(33, 61, 96, 0.2);
		opacity: 0.6;
		border-radius: 50%;
		box-shadow: inset 0px 0px 4px 6px rgba(243, 54, 53, 0.1);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.statusyuan0 {
		width: 40px;
		height: 22px;
		background: rgba(33, 61, 96, 0.2);
		border-radius: 50%;
		box-shadow: inset 0px 0px 4px 6px rgba(114, 98, 99, 0.1);
	}

	.statusyuan2 {
		width: 40px;
		height: 22px;
		background: rgba(33, 61, 96, 0.2);
		border-radius: 50%;
		box-shadow: inset 0px 0px 4px 6px rgba(253, 239, 6, 0.1);
	}

	.statusyuan3 {
		width: 40px;
		height: 22px;
		background: rgba(33, 61, 96, 0.2);
		border-radius: 50%;
		box-shadow: inset 0px 0px 4px 6px rgba(33, 211, 255, 0.1);
	}

	.statusyuan11 {
		width: 40px;
		height: 22px;
		background: rgba(33, 61, 96, 0.2);
		border-radius: 50%;
		box-shadow: inset 0px 0px 4px 6px rgba(243, 54, 53, 0.1);
	}
}


.OrderAnalyse {
	height: 100%;

	.map_large {
		width: 94px;
		height: 34px;
		background: rgba(34, 47, 68, 0.5);
		border-radius: 17px;
		position: absolute;
		top: 10px;
		right: 26%;
		z-index: 9999;
		font-size: 14px;
		font-family: Source Han Sans SC;
		font-weight: bold;
		color: #ffffff;

		img {
			width: 14px;
			margin-right: 10px;
		}
	}
}

// 内容
.home_content {
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	position: absolute;
	top: 10px;
	left: 10px;
	// border: 1px solid yellow;
}

.map_large {
	width: 94px;
	height: 34px;
	background: rgba(34, 47, 68, 0.5);
	border-radius: 17px;
	position: absolute;
	top: 50px;
	right: 564px;
	z-index: 9999;
	font-size: 14px;
	font-family: Source Han Sans SC;
	font-weight: bold;
	color: #ffffff;

	img {
		width: 14px;
		margin-right: 10px;
	}
}

.left {
	width: 25%;
	height: 100%;

	// margin-right: 10px;
	padding: 25px;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	z-index: 1001;

	.left_item {
		flex: 1;
		height: 0;
		// height: 33.33%;
		display: flex;
		flex-direction: column;

		.echarts {
			flex: 1;
			height: 100%;
		}
	}
}

.right {
	width: 25%;
	height: 100%;

	background-size: 100% 100%;
	// margin-right: 10px;
	padding: 25px;
	top: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	z-index: 1001;

	.right_item {
		flex: 1;
		height: 0;
		display: flex;
		flex-direction: column;

		.echarts {
			flex: 1;
			height: 100%;
		}
	}
}
</style>
<style lang="less">
/*名称展示样式*/
// ​.amap-marker-label {
// 	/* width: 86px; */
// 	height: 20px;
// 	background: transparent;
// 	border: 0px;
// 	line-height: 18px;
// }

​
/*配合高德3d掩模使用隐藏背景和高德地图loog*/
// .amap-logo img {
// 	display: none !important;
// 	opacity: 0;
// }

// .amap-copyright {
// 	opacity: 0;
// 	display: none !important;
// }

// ​.amap-container {
// 	background: none !important;
// }

// .amap-logo {
// 	display: none !important;
// }

.eject {
	z-index: 9999;
	position: absolute;
	color: #fff !important;
	padding: 26px 27px 12px 10px;
	top: 44%;
	left: 61%;
	transform: translate(-50%, -50%);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	// background-image: url('../../assets/images/');

	// border: 1px dashed rgba(33, 211, 255, 1);
	// border-right: 3px solid rgba(33, 211, 255, 1);
	// background-size: 100%;
	p {
		color: #fff !important;

		span {
			color: #fff !important;
		}
	}

	.close {
		width: 20px;
		height: 20px;
		line-height: 17px;
		text-align: center;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.3);
		// color: #2e6aff;
		color: #fff;
		// font-weight: 600;
		position: absolute;
		right: 13px;
		top: 12px;
	}

	.imgs {

		// img {
		//   width: 50px;
		// }
		div:nth-0f-type(2) {
			margin-left: 10px;
		}
	}

	.eject_box {
		color: #fff;

		div {
			font-size: 14px;
			padding-bottom: 2px;

			span:nth-of-type(2) {
				color: #00dfff;
			}
		}
	}

	.mb10 {
		margin-bottom: 10px;
	}
}
</style>
